<template>
	<view class="content">
		<view class=" bgWhite justify-between info   ptb12">
			<view class="flex1 mr15">
				<view style="font-size: 32rpx;color: #3d3d3d;">{{detail.title}}</view>
				<text>{{detail.create_time}}</text>
				<view @click="collect" class="collect align-center justify-center">
					<uv-icon name="star"></uv-icon> 收藏
				</view>
			</view>
			<image v-if="detail.img_url" :src="$domain.api+detail.img_url" mode="aspectFill"></image>
		</view>
		<view class="   plr25 mt25 " style="line-height: 56rpx;color: #3d3d3d;">
			<uv-parse :content="detail.content" :tagStyle="style"></uv-parse>
		</view>
		<view class="" style="height:  280rpx;">
		</view>
		<view class="justify-between align-center paybtn">
			<view @click="pay" class="onlinePay">下载报告</view>
		</view>
		<uv-popup ref="popup" :bgColor="none" :closeable="true">
			<view class="popcontent posRelative flex-col justify-center align-center">
				<view class="poptitle">
					提示
				</view>
				<view class="flex1 align-center">
					成为会员才可查看!
				</view>
				<view class="tobuy" @click="gobuy">
					购买会员
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				chain: false,
				value: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				imgList: [],
				id: "",
				detail: {},
				style: {
					img: "max-width:100%"
				},
				userInfo: uni.getStorageSync('userInfo'),
				user_id: uni.getStorageSync('userId'),
				isVip:false


			}
		},
		onShow() {
			this.$api.checkExpired({userId: uni.getStorageSync('userId'),}).then(res=>{
				if(res.code==200){
					this.isVip=true
					
				}else{
					this.isVip=false
				}
			})
		},
		onLoad(opt) {
			if (opt.id) this.id = opt.id
			
			this.getMain()
		},
		methods: {

			async getMain() {
				
				const {
					data,
					code
				} = await this.$api.getReportDetails({
					id: this.id
				})
				if (code == 200) {
					console.log(data)
					this.detail = data
					this.detail.content = this.detail.content.replaceAll('<img src="',
						'<img src="https://xcx.zzbwd.com')

				}
			},
			collect() {
				this.$api.savecollect({
					categoryId: 3,
					userId: uni.getStorageSync('userId'),
					itemId: this.id
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '收藏成功'
					})
				})
			},
			pay() {
				if(this.isVip){
					let form = {
						userId:this.user_id,
						id:this.id
					}
					this.$api.download(form).then(res=>{
						console.log(res)
						if(res.code==200){
							if(res.data.file_url){
								this.$api.savereport({reportId:this.id,userId:this.user_id}).then(res=>{})
								let vm = this
								uni.downloadFile({
									url: vm.$domain.api+res.data.file_url,
									success: function(res) {
										
										var filePath = res.tempFilePath;
										uni.openDocument({
											filePath: filePath,
											showMenu: true,
											success: function(res) {
												uni.hideLoading()
												console.log('Document opened successfully');
											},
											fail: function(err) {
												console.log('Failed to open document', err);
											}
										});
									},
									fail: function(res) {
										console.log('Download failed', res);
									}
								});
							}
						}
					})
				}else{
					this.$refs.popup.open()
				}
				
				
			},
			gobuy(){
					uni.navigateTo({
						url:'/pages/vipApply/index'
					})
			},
			async getOrderStatus(orderno) {
				const data = await this.$api.checkactOrder({
					out_trade_no: orderno
				})
				if (data.code == 200) {
					uni.navigateTo({
						url: '/pages/actorderDetail/index?orderno=' + orderno
					})
				}

			},
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}



	.paybtn {

		position: fixed;
		bottom: 0;
		width: 100%;

		background-color: #fff;
		font-size: 32rpx;
		color: #FFFFFF;

		view {
			flex: 1;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			color: #3D3D3D;

		}

		.onlinePay {
			line-height: 94rpx;
			text-align: center;
			color: #fff;
			height: 94rpx;
			background: #0368FF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}

	.moduleTitle {
		font-weight: 400;
		color: #0C3EC0;
		line-height: 54rpx;
		display: inline-block;
		margin: 30rpx 0 10rpx 30rpx;
		position: relative;
	}



	.content {
		background-color: #fff;
		min-height: 100vh;
	}

	.info {
		border-bottom: 2rpx solid #d8d8d8;
		margin: 0 40rpx;

		image {
			width: 200rpx;
			height: 170rpx;
		}

		text {
			color: #999;
			display: block;
			margin: 10rpx 0 20rpx;

		}

		.collect {
			border: 2rpx solid rgba(0, 0, 0, 0.1);
			display: inline-flex;
			width: 132rpx;
			height: 52rpx;
			border-radius: 60rpx;
			line-height: 52rpx;
		}
	}

	.popcontent {
		width: 638rpx;
		height: 388rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		color: #3D3D3D;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		text-align: center;

		.poptitle {
			height: 106rpx;
			line-height: 106rpx;
			width: 100%;
			border-bottom: 2rpx solid #D8D8D8;
		}

		.tobuy {
			height: 108rpx;
			background: #0368FF;
			border-radius: 0rpx 0rpx 24rpx 24rpx;
			width: 100%;
			color: #fff;
			line-height: 108rpx;

		}
	}
</style>